<template>
  <div class="tools-main">
    <div>
      <a-dropdown :trigger="['click']">
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="1"> 快速创建 </a-menu-item>
            <a-menu-item key="2"> 从JSON导入 </a-menu-item>
          </a-menu>
        </template>
        <a-button type="primary" :icon="h(PlusOutlined)"> 新增工具 </a-button>
      </a-dropdown>
    </div>
    <div class="sheet h-[800px]">
      <div class="server-box h-[500px] flex items-center justify-center" v-if="mcpList.length===0">
        <a-empty  />
      </div>
      <div class="server-box" v-else>
        <a-card v-for="item in mcpList" class="mb-[10px]" hoverable>
          <template #title>
            <div>
              <span> {{ item.server_name }}</span>
              <!-- <DesktopOutlined class="ml-[6px] text-[#666666]" /> -->
              <DesktopOutlined class="ml-[6px] text-[#67c988]" />
            </div>
          </template>

          <template #extra>
            <div>
              <a-switch v-model:checked="checked" @click.stop />
              <a-button
                type="text"
                size="small"
                class="ml-[10px]"
                @click="goToolDetail(item.id)"
              >
                <template #icon>
                  <EllipsisOutlined />
                </template>
              </a-button>
            </div>
          </template>
          <p>
            <a-tag
              color="blue"
              v-if="item.config[item.server_name].transport === 'stdio'"
              >STDIO</a-tag
            >
            <a-tag
              color="blue"
              v-if="item.config[item.server_name].transport === 'sse'"
              >SSE</a-tag
            >
            <a-tag
              color="blue"
              v-if="
                item.config[item.server_name].transport === 'streamable_http'
              "
              >StreamableHttp</a-tag
            >
          </p>
        </a-card>
      </div>
    </div>
    <jsonDialog ref="jsonDialogRef" @refresh="init" />
  </div>
</template>

<script setup lang="ts">
  import { h, reactive, defineAsyncComponent, ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    PlusOutlined,
    EllipsisOutlined,
    DesktopOutlined,
  } from '@ant-design/icons-vue';
  import type { PaginationProps, MenuProps } from 'ant-design-vue';
  import { useToolsApi } from '@/api/tools/index';

  const toolsApi = useToolsApi();
  const router = useRouter();
  const checked = ref<boolean>(false);

  const jsonDialog = defineAsyncComponent(
    () => import('./components/jsonDialog.vue'),
  );

  const data = [];

  const dialogRef = ref();
  const jsonDialogRef = ref();

  const pagination = reactive<PaginationProps>({
    pageSize: 10,
    pageSizeOptions: ['10', '20', '30', '40'],
    current: 1,
    total: data.length,
    showTotal: (total) => `总数据位：${total}`,
    onChange(current, pageSize) {
      pagination.pageSize = pageSize;
      pagination.current = current;
      init();
    },
  });

  const init = async () => {
    getMcpList();
  };

  const handleAddToole = () => {
    dialogRef.value.openDialog();
  };

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    if (e.key === '1') {
    } else if (e.key === '2') {
      jsonDialogRef.value.openDialog();
    }
  };
  const goToolDetail = (id: number) => {
    router.push({
      path: '/tools/detail',
      query: { id: id },
    });
  };
  const mcpList = ref<any>([]);
  // 获取列表数据
  const getMcpList = async () => {
    const data = await toolsApi.getToolList({});
    mcpList.value = data;
  };
  onMounted(() => {
    getMcpList();
  });
</script>

<style scoped lang="scss">
  .server-box {
    padding: 10px;
    height: calc(100% - 60px);
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE和Edge */
    &::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }
  }
</style>
